<template>
    <div class="index_container">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
            <div class="desc-div">
                <h2 align="center">商品详情</h2>
                <div class="goodsDesc">
                    <div class="baseInfo">
                        <div class="photo">
                            <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                        </div>
                        <div class="bookInfo">
                            <p>书名:</p>
                            <p>价格:</p>
                        </div>
                    </div>
                    <div class="bookDesc">
                        <p>图书详情:</p>
        
                    </div>
                    <div class="book-comment">
                        <p>图书评论</p>

                        <div class="comment-info" >
                        <div class="comment-base-info">
                            <label style="display:inline-block;width:70%">评论人:</label>
                            <label style="margin-right:20px">评论时间:</label>
                        </div>
                        <div class="comment-content">
                        
                        </div>
                    </div>

                    </div>
                </div>
            </div>
          </el-main>

            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
       
        
    },
    created() {
        let book_id=this.$route.params.book_id;
    }
}
</script>

<style scoped>
.index_container {
    margin: 0px auto;
    width: 80%;

}
.el-header,.el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
}
.el-header{
        display: flex;
 }

 .el-header .index-logo,.el-header .index-personal{
        width:50%

 }
.el-main {
    background-color: #fff;
    color: #333;
}

.desc-div{
        width:100%;
        border: 0px solid red;
    }
.goodsDesc{
        
        width: 80%;
        margin:0 auto;
        border:1px solid blue;

    }
.baseInfo{
        display: flex;
    }

.baseInfo .photo{
        width: 50%;
        text-align: center;
        margin-bottom:10px;
    }
.bookDesc>p{
        width:100%;
        height: 40px;
        line-height: 40px;
        padding-left:10px;
        box-sizing:border-box;
        color: #fff;
        background-color:darkgray;

    }

   
.book-comment>p{
        width:100%;
        height: 40px;
        line-height: 40px;
        padding-left:10px;
        box-sizing:border-box;
        color: #fff;
        background-color:darkgray;
        margin-bottom: 0px;
    }
.comment-base-info{
        width:100%;
        height: 40px;
        line-height: 40px;
        padding-left:10px;
        box-sizing:border-box;
        color: #fff;
        background-color:yellowgreen

}

.comment-content{
        padding:15px 10px;
}

</style>